﻿{% extends 'base.html' %}

{% block title_suffix %}
    | Book Structure
{% endblock %}

{% block stylesheets %}
		<link rel="stylesheet" content="text/css" href="/static/css/page.restructure.css" />
{% endblock %}

{% block all_content %}
	<div class="page-header">
		<h1>
			Book Structure <small>Restructure Pages and Tests</small>
			<a href="{% url 'page.views.create' %}" class="btn btn-primary pull-right" type="button"><i class="icon-plus icon-white"></i> Add page</a>
		</h1>
	</div>
	<p>
		Drag vertically to adjust placement.<br />
		Drag horizontally to adjust depth placement.<br />
		The dashed green box indicates a valid drop.<br />
	</p>
		
	<div id="page-structure-header" class="navbar">
		<div class="navbar-inner">
			<h2 class="navbar-text pull-left">Page Structure</h2>
			<div class="btn-toolbar">
				<div id="undo-redo" class="btn-group pull-right">
					<button id="undo" class="btn btn-small">Undo</button>
					<button id="redo" class="btn btn-small">Redo</button>
				</div>
			</div>
		</div>
	</div>
	<div id="page-structure-content">
		{% load page_tree %}
		{% page_tree %}
    </div>

    <div id="restructure-saving" class="alert alert-info" style="display: none;">
    	<strong>Saving the new book structure</strong> 
    	<div class="progress progress-striped active">
	   		<div class="bar" style="width: 100%;"></div>
		</div>
    </div>

    <div id="restructure-success" class="alert alert-success" style="display: none;">
    	<strong>Changes Saved!</strong> The new book structure was successfully saved.
    </div>
    
	<div id="restructure-error" class="alert alert-error" style="display: none;">
    	<strong>Error!</strong> Something went wrong when trying to save the new book structure.
    </div>

    <div id="page-structure-footer" class="form-actions">
    	<div class="pull-right">
			<button id="save" class="btn btn-primary">Save Changes</button>
		</div>
	</div>

{% endblock %}

{% block scripts %}
	<script type="text/javascript" src="/static/lib/nested_sortable/jquery.mjs.nestedSortable.js"></script>
	<script type="text/javascript" src="/static/script/action_stack.js"></script>
	<script type="text/javascript" src="/static/script/tag_tree.js"></script>
	<script type="text/javascript" src="/static/script/setup_ajax.js"></script>
	<script type="text/javascript" src="/static/script/page.restructure.js"></script>
{% endblock %}